<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table {
				margin: 30px auto;
				border: ;
				width: 320px;
				height: 200px;
				text-align: center;
				border-collapse: collapse;
				/*单线*/
			}
			
			table td {
				border: 1px solid lightgray;
				/*表格边框*/
				background-color: #F0F0F0;
			}
			
			table th {
				color: white;
				background-color: #0098C9;
				/*表头背景色*/
				border: 1px solid #D0D0D0;
				/*表头边框*/
			}
		</style>
	</head>

	<body>
		<table>
			<tr>
				<th><input type="checkbox" id="alloption" /></th>
				<th>菜名</th>
				<th>饭店</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="option" id="1" /></td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="option" id="2" /></td>
				<td>西红柿鸡蛋</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="option" id="3" /></td>
				<td>醋溜土豆丝</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="option" id="4" /></td>
				<td>萝卜干炒黄豆儿</td>
				<td>田老师</td>
			</tr>
		</table>
		<script>
			var array = document.getElementsByClassName("option");
			var all = document.getElementById("alloption");
			var o1 = document.getElementById("1");
			var o2 = document.getElementById("2");
			var o3 = document.getElementById("3");
			var o4 = document.getElementById("4");
			//选项的选择情况
			for (var i = 0; i < array.length; i++) {
				array[i].onclick = Click;
			}

			function Click() {
				if (!this.checked) {
					all.checked = false;
				}
				if (o1.checked && o2.checked && o3.checked && o4.checked) {
					all.checked = true;
				}
			}
			//	全选复选框的函数
			all.onclick = function() {
				//全选框选中
				if (all.checked) //all.checked = true
				{
					//alert("选了全选");
					for (var i = 0; i < array.length; i++) {
						array[i].checked = true;
					}
				}
				//全选框不选
				else //all.checked = false
				{
					//alert("取消全选");
					//alert("选了全选");
					for (var i = 0; i < array.length; i++) {
						array[i].checked = false;
					}
				}
			}
		</script>
	</body>

</html>